<template>
  <view class="imgDetail">
    <movable-area class="movable-area">
      <movable-view class="movable-view" direction="all" :scale="true" :scale-min="0.5" :scale-max="4"
        :scale-value="scale" inertia>
        <easy-loadimage class="lookimg" mode="widthFix" :image-src="imageSrc" @tap="hideOperationBar"
          @longpress="displayOperationBar"></easy-loadimage>
      </movable-view>
    </movable-area>
    <view class="operation" :style="{ Transform: `translateY(${location}px)` }">
      <view class="item" @tap="back">
        <uni-icons type="undo" size="30" color="white"></uni-icons>
      </view>
      <view class="item" @tap="like">
        <uni-icons v-if="!likeImgs.includes(imageSrc)" type="heart" size="30" color="white"></uni-icons>
        <uni-icons v-else type="heart-filled" size="30" color="red"></uni-icons>
      </view>
      <view class="item" @tap="download">
        <uni-icons type="download" size="30" color="white"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { useLikeStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { likeImgs } = storeToRefs(useLikeStore())
const likeStore = useLikeStore()
const imageSrc = ref('')
const scale = ref(1)
const location = ref(150)
const isItDownloading = ref(false)
const hideOperationBar = () => {
  location.value = 150
}
const displayOperationBar = () => {
  location.value = 0
}
const back = () => {
  uni.navigateBack()
}
const like = () => {
  const exit = likeImgs.value.includes(imageSrc.value)
  if (exit) {
    likeStore.delImg(imageSrc.value)
  } else {
    likeStore.addImg(imageSrc.value)
  }
}
const download = () => {
  if (isItDownloading.value) {
    uni.showToast({
      title: '正在下载中，请稍后'
    })
  } else {
    isItDownloading.value = true
    // uniapp下载图片
    uni.downloadFile({
      url: imageSrc.value,
      success: (res) => {
        isItDownloading.value = false
        if (res.statusCode === 200) {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '下载成功',
                icon: 'success'
              })
            },
            fail: () => {
              uni.showToast({
                title: '下载失败',
                icon: 'error'
              })
            }
          })
        }
      },
      fail: () => {
        isItDownloading.value = false
        uni.showToast({
          title: '下载失败',
          icon: 'error'
        })
      }
    })
  }

}
onLoad((option: any) => {
  imageSrc.value = option.url
})
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.imgDetail {
  width: 100%;
  padding-top: var(--status-bar-height + 10px);
  height: calc(100vh - var(--window-top) - var(--window-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.285);

  .movable-area {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .movable-view {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .operation {
    width: 100%;
    position: fixed;
    z-index: 100;
    bottom: 0;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(128, 128, 128, 0.136);
    transition: all 0.6s;

    .item {
      padding: 10px;
    }
  }
}
</style>